//@ts-nocheck
import { InfiniteScroll, List, NavBar, } from "antd-mobile";
import { useState, useEffect } from "react";
import { listen } from "./API";
import { useNavigate } from "react-router-dom";
import style from "../css/listen.module.css"
import moment from "moment";
import { RedoOutline, UserAddOutline, PlayOutline } from "antd-mobile-icons";
import { useSelector,useDispatch } from "react-redux/es/exports";
import {seturl} from "../store/music"
export default () => {
  let [list, setList] = useState([]);
  let [hasMore, setHasMore] = useState(true);
  let states=useSelector((state)=>state.musicSlice.url);
  let dispatch=useDispatch();
  let [obj, setObj] = useState({
    page: 1,
    language: 0,
    perpage: 10,
  });
  let singers = async () => {
    let { data } = await listen(obj);
    console.log(data);
    
    setList((val: any): any => [...val, ...data.data.list]);
    setObj((val: any) => val.page + 1);
    setHasMore(data.data.list.length > 0);
  };
  let nav = useNavigate();
  let back = () => {
    nav(-1);
  };
  useEffect(() => {
    singers();
  }, []);
  return (
    <div>
      <NavBar
        style={{
          "--height": "36px",
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        听故事
      </NavBar>
      <List>
        {list.map((item, index) => (
          <List.Item key={index}>
            <div className={style.box} onClick={()=>{nav("/bookxq/id=" + item.goods_id);}}>
              <img width={"70px"} src={item.cover_image} alt="" />
              <div>
                <h2>{item.title}</h2>
                <span>
                  <RedoOutline />
                </span>
                <span style={{ marginLeft: "5px" }}>
                  {moment.utc(item.time * 1000).format("mm:ss")}
                </span>
                <span style={{ marginLeft: "20px" }}>
                  <UserAddOutline />
                </span>
                <span style={{ marginLeft: "5px" }}>{item.play_num}</span>
                <p>
                  <img width={"30px"} src={item.expert_info.avatar} alt="" />
                  <span>{item.expert_info.name}</span>
                </p>
              </div>
              <button
                onClick={(e) => {
                  dispatch(seturl(item.video_url));
                  e.stopPropagation();
                }}
              >
                <PlayOutline /> 播放
              </button>
            </div>
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={singers} hasMore={hasMore} />
      
    </div>
  );
};
